<template>
  <div id="costStatistics">
    <el-card class="box-card" style="margin:15px">
      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="basicData.model"
        class="demo-form-inline"
        size="mini"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="areaId.key" width="300px">
              <el-select
                size="mini"
                v-model="basicData.model.areaId.key"
                placeholder="选择"
                @change="clickOrgTree"
              >
                <el-option
                  v-for="(item, index) in orgTree"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                  width="300px"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属医院:" prop="hospitalId.key">
              <el-select
                size="mini"
                v-model="basicData.model.hospitalId.key"
                placeholder="选择"
                @change="clickOrgTreeC"
              >
                <el-option
                  v-for="(item, index) in orgTreeC"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departId.key">
              <el-select size="mini" v-model="basicData.model.departId.key" placeholder="选择">
                <el-option
                  v-for="(item, index) in orgTreeCs"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计费时段:">
              <el-date-picker
                size="mini"
                v-model="timeList"
                style="width:100%"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div
        class="buttom"
        style="display: flex;align-items: center;justify-content: center;margin-top:15px"
      >
        <el-button
          type="primary"
          size="mini"
          style="width:100px"
          icon="el-icon-search"
          @click="onSubmit('query')"
        >查询</el-button>
        <el-button size="mini" @click="onSubmit('reset')">重置</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button size="mini" type="primary" @click="clickPrint">打印</el-button>
        <el-button size="mini" type="primary" @click="clickDaochu">导出列表</el-button>
        <el-button size="mini" @click="getList(basicData)">刷新</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
        @selection-change="selectTable"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="hospitalName" label="医院名称" show-overflow-tooltip />
        <el-table-column align="center" prop="endTime" label="计费时段">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime?scope.row.startTime.substr(0, 10):'' }}</span>-
            <span>{{ scope.row.endTime?scope.row.endTime.substr(0, 10):'' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sampleCount" label="计费列数" />
        <el-table-column align="center" prop="returnNorm" label="采样收费" />
        <el-table-column align="center" prop="feeNorm" label="实验室收费" />
        <el-table-column align="center" prop="experimentPrice" label="合计（元）" />
        <!-- <el-table-column align="center" label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickEdit(scope.row)"
            >修改</el-button>
            <el-button size="mini" type="danger" @click="clickDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>-->
      </el-table>
    </el-card>
    <el-dialog :visible.sync="printShow" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color:#fff"
      >计费打印</span>
      <el-table
        :data="selectList"
        style="width: 100%;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
        id="print"
      >
        <el-table-column align="center" prop="hospitalName" label="医院名称" show-overflow-tooltip />
        <el-table-column align="center" prop="endTime" label="计费时段">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime?scope.row.startTime.substr(0, 10):'' }}</span>-
            <span>{{ scope.row.endTime?scope.row.endTime.substr(0, 10):'' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sampleCount" label="计费列数" />
        <el-table-column align="center" prop="returnNorm" label="采样收费" />
        <el-table-column align="center" prop="feeNorm" label="实验室收费" />
        <el-table-column align="center" prop="experimentPrice" label="合计（元）" />
      </el-table>
      <span slot="footer" class="dialog-footer flex">
        <el-button
          size="small"
          v-print="'#print'"
          type="primary"
          style="padding: 6px 19px;"
        >打 印</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MessageStatisticsApi from "@/api/MessageStatistics.js";
import { initDicts } from "@/utils/commons";
import orgApi from "@/api/Org.js";

export default {
  data() {
    return {
      // 转菊花
      loading: false,
      printShow: false,
      // 总数
      total: 0,
      // 表格数据
      tableData: [],
      // 选中数据
      selectList: [],
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: [],
      basicData: {
        current: 1,
        map: {},
        model: {
          areaId: {
            key: ""
          },
          createTime: {
            end: "",
            start: ""
          },
          departId: {
            key: ""
          },
          hospitalId: {
            key: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 字典
      dicts: {
        EXPERIMENT_CODE: {}, //项目
        PRICE_STATUS: {} //项目费用状态
      },
      // 校验
      basicDataRules: {
        "areaId.key": [{ required: false, message: "  ", trigger: "change" }],
        "hospitalId.key": [
          { required: false, message: "  ", trigger: "change" }
        ],
        "departId.key": [{ required: false, message: "  ", trigger: "change" }]
      },
      timeList: []
    };
  },
  mounted() {
    initDicts(["EXPERIMENT_CODE", "PRICE_STATUS"], this.dicts);
    this.initOrgTree();
    this.getList(this.basicData);
  },
  methods: {
    // 点击打印
    clickPrint() {
      if (this.selectList.length == 0) {
        this.$message.error("请选择要打印的数据！");
        return;
      }
      this.printShow = true;
    },
    // 导出
    clickDaochu() {},
    // 基础信息按钮点击事件
    onSubmit(type) {
      if (type == "query") {
        this.basicData.model.createTime.start = this.timeList[0];
        this.basicData.model.createTime.end = this.timeList[1];
        this.getList(this.basicData);
      } else if (type == "reset") {
        // 如果为true则清空表单
        this.$refs["basicForm"].resetFields();
        this.basicData.model.createTime.start = "";
        this.basicData.model.createTime.end = "";
        this.timeList = [];
        this.getList(this.basicData);
      }
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.basicData.model.hospitalId.key = "";
      this.basicData.model.departId.key = "";
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.basicData.model.departId.key = "";
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });
    },
    // 列表选择
    selectTable(v) {
      this.selectList = v;
    },
    // 获取数据
    getList(data) {
      this.loading = true;
      MessageStatisticsApi.costStatistics
        .page(data)
        .then(res => {
          if (res.status == "200") {
            this.tableData = res.data.data.records;
            this.loading = false;
          } else {
            this.$message.error(res.statusText);
          }
        })
        .finally(() => (this.loading = false));
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#costStatistics {
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-textarea {
    width: 100% !important;
  }
  .el-range-separator {
    width: 10%;
  }
  .el-form-item__content {
    height: 28px;
  }
  @media screen and (max-width: 1450px) {
    .el-form-item__content {
      height: 40px;
    }
  }

  .el-date-editor {
    width: 100%;
  }
  .el-dialog__header {
    .flex;
    background: #2669f3;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .flex;
    flex-direction: column;
    .top-list {
      width: 65%;
      .col {
        margin: 15px 0;
      }
    }
  }
  .acceptance-dialog {
    max-height: 265px;
    overflow: auto;
  }
  .but-form {
    margin: 20px 0;
  }
}
</style>
